<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="info.title"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :before-close="beforeClose"
    class="tag-edit-dialog tag-text-dialog"
    width="50%"
    v-dialogMove
  >
    <p class="tag-scrollbar">{{ info.content }}</p>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      info: {}
    }
  },
  methods: {
    showDialog(info) {
      this.info = info
      this.dialogVisible = true
    },
    submit() {
      this.beforeClose()
    },
    beforeClose() {
      this.info = {}
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
.tag-text-dialog {
  p {
    height: 50vh;
    line-height: 30px;
    word-break: break-all;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
